<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container" myattr='value'>hello<div>元素1</div><!-- 我是注释 --></div>
    <script>
        var containerEle = document.querySelector(".container");
        var cNodes = containerEle.childNodes;
        console.log(cNodes);
        //一、 节点类型  nodeType 
       console.log("文本",cNodes[0].nodeType );  // 类型 3
       console.log('元素',cNodes[1].nodeType) ;  //类型  1
       console.log('注释',cNodes[2].nodeType) ;  //类型 8
        //属性 :获取一个元素的属性  attributes

       var attrs =   containerEle.attributes;
      //   attrs[1] 属性节点
      //   console.log(attrs[1]); 
        console.log("属性节点", attrs[1].nodeType);    // 类型 2

        // 二、节点值节名 nodeName和节点值 nodeValue
        console.log("属性节点nodeName:", attrs[1].nodeName);    // nodeName是属性名
        console.log("属性节点nodeValue:", attrs[1].nodeValue)  // nodeValue 就是属性值

        console.log("文本节点nodeName:", cNodes[0].nodeName);    // nodeName是 #text
        console.log("文本节点nodeValue:", cNodes[0].nodeValue)  // nodeValue 文本内容

        console.log("元素节点nodeName:", cNodes[1].nodeName);    // nodeName是 标签名称
        console.log("元素节点nodeValue:", cNodes[1].nodeValue)   // nodeValue 是null

        console.log("注释节点nodeName:", cNodes[2].nodeName);    // nodeName是 #comment
        console.log("注释节点nodeValue:", cNodes[2].nodeValue)   // nodeValue 是注释的内容
    




    </script>
</body>
</html>